<template>
    <div class="container" :class="{ dark: value1 == true }">
        <img class="bg" src="@/assets/login.svg" alt="">
        <el-switch v-model="value1" class="switch" />
        <div class="box">
            <p class="text">用户登录</p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="90px">
                <el-form-item label="账号：" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="手机号：" prop="phonenum">
                    <el-input v-model="ruleForm.phonenum" />
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
                <el-form-item label="验证码：" prop="code">
                    <el-input v-model="ruleForm.code" />
                </el-form-item>
                <el-form-item label="验证码：" prop="code">
                    <!-- <el-input v-model="ruleForm.code2" /> -->
                    <el-input v-model="ruleForm.code2" placeholder="Please input">
                        <template #append>
                            <el-button @click="sendcode" :disabled="msg != '获取验证码'">{{ msg }}</el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="btn" @click="onLogin">登录</el-button>

        </div>
    </div>
</template>
<script>
import request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            ruleForm: {
                username: "",
                phonenum: "",
                password: "",
                code: "",
                code2: ""
            },
            rules: {
                phonenum: [
                    { required: true, message: '请填写手机号', trigger: 'blur' },
                    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ]
            },
            value1: false,
            msg: '获取验证码',
            timer: null,
            count: 10
        }
    },
    methods: {
        onLogin() {
            console.log(this.ruleForm, 'ruleForm')
            request.post('/login', this.ruleForm).then(res => {
                if (res.data.code == 200) {
                    // 提示登录成功
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    // 存储token
                    localStorage.setItem('token', res.data.token)
                    // 存储登录用户信息
                    localStorage.setItem('username', this.ruleForm.username)
                    // 跳转到首页
                    this.$router.push('/')
                }
            })

        },
        sendcode() {
            this.timer = setInterval(() => {
                this.count--
                if (this.count == 0) {
                    this.msg = '获取验证码'
                    clearInterval(this.timer)
                    this.count = 10
                } else {
                    this.msg = this.count + 's后重新发送'
                }
            }, 1000)
        }
    }
}

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    min-height: 100vh;

    &.dark {
        background-color: black;
    }

    // position: relative;
    .bg {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 600px;
    }

    .switch {
        position: fixed;
        right: 40px;
        top: 20px;
    }

    .box {
        position: absolute;
        left: 70%;
        top: 60%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 300px;
        // background: rgb(54, 51, 51);
        padding: 20px;

        .text {
            text-align: center;
            font-size: 20px;
            color: #807c7c;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .btn {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px auto;
        }
    }
}
</style>